.modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  z-index: 40;
  @apply py-[100px];
}

.modal-close {
  @apply bg-white dark:bg-gray-800;
}

.modal-content {
  background-color: white;
  border-radius: 6px;
  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
  width: 90vw;
  max-width: 450px;
  max-height: initial;
  /* animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1); */
  @apply p-6 z-10 relative;
}

.modal-content.modal-size-xl {
  max-width: 900px;
}

.modal-content.modal-size-lg {
  max-width: 700px;
}

.modal-content.modal-size-sm {
  max-width: 350px;
}

.modal-content:focus {
  outline: none;
}

.modal-title {
  @apply text-xl font-bold pb-4;
}

.modal-desc {
  margin: 10px 0 20px;
  color: black;
  font-size: 15px;
  line-height: 1.5;
}

.modal-close {
  @apply w-9 h-9 p-1 border hover:bg-gray-50 hover:text-gray-600 rounded-md text-gray-400;
  @apply flex items-center justify-center;
  @apply absolute top-5 right-6 cursor-pointer;
}

/* @keyframes overlayShow { */
/*   from { */
/*     opacity: 0; */
/*   } */
/*   to { */
/*     opacity: 1; */
/*   } */
/* } */

/* @keyframes contentShow { */
/*   from { */
/*     opacity: 0; */
/*     transform: translate(-50%, -48%) scale(0.96); */
/*   } */
/*   to { */
/*     opacity: 1; */
/*     transform: translate(-50%, -50%) scale(1); */
/*   } */
/* } */
